<template>
  <div class="w-full flex justify-center items-center">
    <h3 class="text-2xl font-bold mb-4">
      {{ $t("aboutTravelAi.Intelligent") }}
    </h3>
  </div>
  <div class="flex justify-start items-center resource">
    <div class="resource1 flex justify-center items-center">
      <p>{{ $t("plateForm.online") }}</p>
    </div>
    <div class="resource2 flex justify-center items-center">
      <p>{{ $t("plateForm.arLine") }}</p>
    </div>
    <div class="resource3 flex justify-center items-center">
      <p>{{ $t("plateForm.B2B") }}</p>
    </div>
    <div class="resource4 flex justify-center items-center">
      <p>{{ $t("plateForm.offline") }}</p>
    </div>
  </div>
  <div class="mt-10 textStyle">
    <li>
      {{ $t("plateForm.resourceText1") }}
    </li>
    <li>{{ $t("plateForm.resourceText2") }}</li>
    <li>{{ $t("plateForm.resourceText3") }}</li>
    <li>
      {{ $t("plateForm.resourceText4") }}
    </li>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.resource {
  p {
    max-width: 240px;
  }
}
.resource1 {
  width: 24%;
  background: url(../../../assets/images/Platform/1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0% 0%;
  height: 200px;
  position: relative;
  p {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.resource2 {
  width: 24%;
  background: url(../../../assets/images/Platform/2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 33% 0%;
  height: 200px;
  position: relative;
  p {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.resource3 {
  width: 24%;
  background: url(../../../assets/images/Platform/3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 67% 0%;
  height: 200px;
  position: relative;
  p {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.resource4 {
  width: 24%;
  background: url(../../../assets/images/Platform/4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 100% 0%;
  height: 200px;
  position: relative;
  p {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.textStyle {
  li {
    margin-top: 3%;
  }
}
</style>
